<template>
	<div style="width: 100%;">
		<div style="display: flex; width: 100%;">
			
			<div style="width: 100%;"><p style="text-align: center;">订单管理</p></div>
			
			<div style="margin-left: auto; display: flex;">
				
				<div>
					<el-select v-model="data.order.payment"  placeholder="付款状态" style="width: 150px">
						<el-option v-for="item in data.payment" :label="item.name" :value="item.id"/>
					</el-select>
				</div>
				&emsp;&emsp;
				<div>
					<el-select v-model="data.order.shipment"  placeholder="发货状态" style="width: 150px">
						<el-option v-for="item in data.shipment" :label="item.name" :value="item.id"/>
					</el-select>
				</div>
				&emsp;&emsp;
				<div>
					<el-select v-model="data.order.day"  placeholder="天数" style="width: 150px">
						<el-option v-for="item in data.date" :label="item.name" :value="item.id"/>
					</el-select>
				</div>
				&emsp;&emsp;
				<div>
					<el-button size="default" type="danger" style="background-color: #E1337F;" @click="search()">
						<el-icon><Search /></el-icon>搜索</el-button>
				</div>
				
			</div>
			
		</div>
		<div style="background-color: #E1337F;height: 0.1rem;"></div>
		<el-card >
		<div style="width: 100%;">
		<el-table :data="data.orders" style="width: 100%;" border>
			<el-table-column type="expand">
				
				<template #default="orditem">
					<h3 style="text-align: center;">订单详情</h3>
					<el-popover :visible="data.a" placement="top" :width="300">
					  <p style="text-align: center;">请输入发货信息</p>
					
						<div>
							发货单号
							<el-input v-model="data.o.shipsn" placeholder="发货单号" :prefix-icon="Cellphone" style="width: 16rem;" />
							</div>
							&emsp;
						<div>
							快递公司或快递员
							<el-input v-model="data.o.shipname" placeholder="快递公司或快递员" :prefix-icon="Cellphone" style="width: 16rem;" />
							</div>
						
						&emsp;
					  <div style="text-align: right; margin: 0">
					    <el-button size="small" text @click="gom(orditem.row.ordid)">确认</el-button>
					    <el-button size="small" type="primary" @click="data.a = false">
					      取消
					    </el-button>
					  </div>
					  <template #reference>
					    <el-button v-if="orditem.row.payment!=0&&orditem.row.shipment!=1" size="default" type="danger" style="background-color: #E1337F;" @click="ments()"><el-icon><Expand /></el-icon>发货</el-button>
					  </template>
					</el-popover>
					<div style="display: flex;margin-left: 35%;">
						<p>下单账号：{{orditem.row.user.account}}</p>&emsp;&emsp;&emsp;&emsp;
						<p>下单手机号：{{orditem.row.user.phone}}</p>&emsp;&emsp;&emsp;&emsp;
						<p>下单昵称：{{orditem.row.user.uname}}</p>&emsp;&emsp;&emsp;&emsp;
					</div>
					<el-table :data="orditem.row.orditems" :border="true">
					  <el-table-column label="商品编号" prop="commodity.comid" />
					  <el-table-column label="商品名称" prop="commodity.comname"/>
					  <el-table-column label="商品图片" prop="commodity.pic" >
						  <template #default="car">
							  <el-image style="width: 5rem;height: 5rem;"
							  	:src="$ip+`/public/shows/`+car.row.commodity.pic" />
						  </template>
					  </el-table-column>
					  <el-table-column label="生产日期">
						  <template #default="car">
							  {{mytpost(car.row.commodity.tmake)}}
						  </template>
					  </el-table-column>
					  <el-table-column label="数量" prop="num" />
					  <el-table-column label="价格">
						 
						  <template #default="car">
						  		 <p style="color: #E1337F;">¥{{car.row.price}}</p>					 
						  </template>
					  </el-table-column>
					</el-table>
					</template>
			</el-table-column>
			<el-table-column label="订单号" prop="ordid"></el-table-column>
			<el-table-column label="收货人" prop="user.uid"></el-table-column>
			<el-table-column label="收货地址" prop="shipadds"></el-table-column>
			<el-table-column label="联系电话" prop="shipphone"></el-table-column>
			<el-table-column label="发货单号" prop="shipno"></el-table-column>
			<el-table-column label="下单时间" >
				<template #default="car">
					{{mytpost(car.row.orddate)}}
				</template>
			</el-table-column>
			<el-table-column label="总价" prop="amount"></el-table-column>
			<el-table-column label="付款状态" >
				<template #default="car">
					<p style="color: #E1337F;">{{payment(car.row.payment)}}</p>
				</template>
			</el-table-column>
			<el-table-column label="发货状态" >
				<template #default="car">
					<p style="color: #E1337F;">{{shipment(car.row.shipment,car.row.payment)}}</p>
				</template>
			</el-table-column>
			<el-table-column label="签收状态">
				<template #default="car">
					<p style="color: #E1337F;">{{signment(car.row.tsign)}}</p>
				</template>
			</el-table-column>
		
		</el-table>
		<div style="margin-left: 40%;">
			<el-button  @click="show()" size="large" style="background-color: #E1337F;  margin-left: 6rem;color: #FFFFFF;">显示更多</el-button>
		</div>
		
		</div>
		</el-card>
		</div>
</template>


<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf} from '../../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import router from"../../router/index.js"
		import store from "../../store/index.js"
		import {Search,ShoppingCart,Plus,EditPen,Expand} from '@element-plus/icons-vue'
		import bottom from "../../components/bottom.vue"
		import {useRoute,useRouter} from "vue-router"
		import {success,warning,message,errors} from '../../store/alert.js'
		const route =useRouter()
		const visible = ref(false)
		const data=reactive({
			orders:[],
			order:{payment:undefined,shipment:undefined,day:undefined},
			page:{
				p:0,
				l:5
			},
			payment:[{id:undefined,name:"-请选择-"},{id:0,name:"未付款"},{id:1,name:"已付款"}],
			shipment:[{id:undefined,name:"-请选择-"},{id:0,name:"未发货"},{id:1,name:"已发货"}],
			date:[{id:undefined,name:"-请选择-"},{id:7,name:"7天内"},{id:15,name:"15天内"},
			{id:30,name:"30天内"},{id:60,name:"60天内"},
			{id:120,name:"120天内"}],
			o:{shipsn:"",shipname:""},
			a:false
		})
		function ments(){
			data.a = true
			data.o={shipsn:"",shipname:""}
			
		}
		function gom(ordid){
			if(data.o.shipsn==""||data.o.shipname==""){
				errors("发货信息不允许为空")
				return
			}
			data.a = false
			let f=new FormData()
			f.append("ordid",ordid)
			f.append("shipno",data.o.shipsn)
			$postf("/mer/order/updateship/"+data.page.p+"/"+data.page.l,f).then((read)=>{
				success(read.data.msg)
				data.orders=read.data.data.order
			})
		}
		function search(){
			data.orders=[]
			let fd=new FormData()
			if(data.order.day!=undefined){
				fd.append("day",data.order.day)
			}
			if(data.order.payment!=undefined){
				fd.append("payment",data.order.payment)
			}
			if(data.order.shipment!=undefined){
				fd.append("shipment",data.order.shipment)
			}
			$postf("/mer/order/findByOrder",fd).then((read)=>{
				if(read.data.code==401){
					errors(read.data.msg)
				}else{
					data.orders=read.data.data
				}
				
			})
			
		}
		const mytpost = computed(() => {
			return function(tpost) {
				console.log(tpost)
				let t = new Date(tpost)
				let yy = t.getFullYear()
				let mm = t.getMonth() + 1
				let dd = t.getDate()
				let a = yy + "年" + mm + "月" + dd + "日"
				console.log(a)
				return a
			}
		})
		
		const payment=computed(()=>{
			return function (ment){
				if(ment==0){
					return "未付款"
				}else{
					return"已付款"
				}
			}
		})
		const shipment=computed(()=>{
			return function (ment,payment){
				if(ment==0){
					if(payment==1){
						return "未发货/可发货"
					}else{
						return "未发货"
					}
				}else{
					return"已发货"
				}
			}
		})
	const signment=computed(()=>{
		return function (ment){
			if(ment==undefined){
				return "未签收"
			}else{
				return"已签收"
			}
		}
	})
		function show(){
			data.page.l=data.page.l+data.page.l
			$get("/mer/order/findAll/"+data.page.p+"/"+data.page.l).then((read)=>{
				data.orders=read.data.data.order
			})
			
		}
		onMounted(()=>{
			$get("/mer/order/findAll/"+data.page.p+"/"+data.page.l).then((read)=>{
				data.orders=read.data.data.order
				
			})
			
			
			
		})
		
</script>

<style>
</style>
